<!DOCTYPE HTML>
<html>
    <head>
        <title>简单聊天</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <link rel="stylesheet" type="text/css" href="./index.css">
        <script>
            ;(function(win){
                win.OvO = {
                    id:function(v){
                        return document.getElementById(v);
                    },
                    param:function(z){
                        var arr = [];
                        for(var name in z){
                            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(z[name]));
                        }
                        arr.push(('v=' + Math.random()).replace('.',''));
                        return arr.join('&');
                    },
                    get:function(url,data,callback){
                        var xhr = new XMLHttpRequest();
                        var params = OvO.param(data);
                        xhr.onreadystatechange = function(){
                            if(xhr.readyState === 4){
                                if(xhr.status >=200 && xhr.status <= 300){
                                    callback(JSON.parse(xhr.responseText));
                                }else{
                                    console.dir('错误')
                                }
                            }
                        }
                        xhr.open('GET',url + '?' + params,true);
                        xhr.send(null);
                    }
                }
            })(window);
        </script>
    </head>
    <body>
        <div class="root" id="root">
            <div class="who" id="who">
                <span class="tips" id="tips"></span>
                <span class="who-name" id="who-name"></span>
            </div>
            <div class="content" id="content"></div>
            <div class="enter">
                <div><input type="text" placeholder="在此输入聊天内容..." id="msg"></div><span id="submit">发送</span>
            </div>
        </div>
        <script>
            window.addEventListener('DOMContentLoaded',function(){
                ;(function checkName(){
                    var myName = localStorage.getItem('sampleChatName');
                    if(myName){
                        OvO.id('who-name').innerText = localStorage.getItem('sampleChatName');
                        OvO.get('./action.php',{cmd:"getLastId"},function(data){
                            if(data.code){
                                localStorage.setItem('indexStart',data.msg.id);
                            }
                        });
                    }else{
                        var mask = document.createElement('div');
                        mask.className = 'mask';
                        mask.id = 'mask';
                        mask.innerHTML = '<div class="panel">'
                        + '<div class="name"><input type="text" placeholder="请再此输入您的姓名..." id="sampleChatName"></div>'
                        + '<div class="action"><span class="closeMask" id="closeMask">关闭</span><span class="confirmMask" id="confirmMask">确认</span></div>'
                        + '</div>';
                        OvO.id('root').appendChild(mask);
                        OvO.id('closeMask').addEventListener('click',function(){
                            OvO.id('root').removeChild(OvO.id('mask'));
                        });
                        OvO.id('confirmMask').addEventListener('click',function(){
                            var sampleChatName = OvO.id('sampleChatName').value;
                            localStorage.setItem('sampleChatName',sampleChatName);
                            OvO.id('who-name').innerText = sampleChatName;
                            OvO.id('root').removeChild(OvO.id('mask'));
                            OvO.get('./action.php',{cmd:"getLastId"},function(data){
                                if(data.code){
                                    localStorage.setItem('indexStart',data.msg.id);
                                }
                            });
                        });
                    }
                })();
                var xxxx;
                function timeConvert(t){
                    var h = ('00' + t.getHours()).substr(-2);
                    var m = ('00' + t.getMinutes()).substr(-2);
                    var s = ('00' + t.getSeconds()).substr(-2);
                    return h + ':' + m + ':' + s;
                }
                function stopBottom(){
                    var content = OvO.id('content');
                    content.scrollTop = content.scrollHeight - content.offsetHeight;
                }
                function varify(){
                    var msg = OvO.id('msg').value;
                    var tips = OvO.id('tips');
                    if(!msg){
                        tips.innerText = '未输入任何字符...';
                        return false;
                    }
                    if(msg.length > 30){
                        tips.innerText = '不能输入超过30个字符...';
                        return false;
                    }
                    sendMsg();
                }
                function sendMsg(){
                    var msg = OvO.id('msg').value;
                    var name = OvO.id('who-name').innerText;
                    OvO.get('./action.php',{cmd:"sendMsg",name:name,msg:msg},function(data){
                        if(data.code){
                            var li = document.createElement('div');
                            li.className = 'li';
                            li.innerHTML = '<div class="name-and-time">'
                            + '<span class="name">' + OvO.id('who-name').innerText + '</span>'
                            + '<span class="time">' + timeConvert(new Date()) + '</span>'
                            + '</div>'
                            + '<div class="msg">' + OvO.id('msg').value + '</div>';
                            OvO.id('content').appendChild(li);
                            OvO.id('msg').value = '';
                            localStorage.setItem('indexStart',parseInt(localStorage.getItem('indexStart')) + 1);
                            xxxx = localStorage.getItem('indexStart');
                            stopBottom();
                        }
                    });
                }
                OvO.id('submit').addEventListener('click',function(){
                    varify();
                });
                window.addEventListener('keydown',function(e){
                    if(e.keyCode === 13){
                        varify();
                    }
                });
                setInterval(function(){
                    OvO.get('./action.php',{cmd:"obtainMsg",indexStart:localStorage.getItem('indexStart')},function(data){
                        if(data.code){
                            var indexStart = 0;
                            data.msg.forEach(function(v,i){
                                indexStart = v.id;
                                var li = document.createElement('div');
                                li.className = 'li';
                                li.innerHTML = '<div class="name-and-time">'
                                + '<span class="name">' + v.name + '</span>'
                                + '<span class="time">' + v.itime + '</span>'
                                + '</div>'
                                + '<div class="msg">' + v.msg + '</div>';
                                OvO.id('content').appendChild(li);
                                stopBottom();
                            });
                            localStorage.setItem('indexStart',indexStart);
                        }
                    });
                },3000);
            });
        </script>
    </body>
</html>